<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>loading</title>
    <style>
        #box{
            overflow: hidden;
        }
        @keyframes a{
            100%{
                transform: scaleY(1);
            }
        }
        #box div{
            width: 15px;
            height: 80px;
            background: #ccc;
            float: left;
            margin: 0 2px;
            border-radius: 10px;
            transform: scaleY(0.3);
        }
        #box div:nth-of-type(1){
            animation: a 0.8s linear .1s alternate infinite ;
        }
        #box div:nth-of-type(2){
            animation: a 0.8s linear .2s alternate infinite ;
        }
        #box div:nth-of-type(3){
            animation: a 0.8s linear .4s alternate infinite ;
        }
        #box div:nth-of-type(4){
            animation: a 0.8s linear .6s alternate infinite ;
        }
        #box div:nth-of-type(5){
            animation: a 0.8s linear .8s alternate infinite ;
        }
        #box div:nth-of-type(6){
            animation: a 0.8s linear 1s alternate infinite ;
        }
        #box div:nth-of-type(7){
            animation: a 0.8s linear 1.2s alternate infinite ;
        }
        #box div:nth-of-type(8){
            animation: a 0.8s linear 1.4s alternate infinite ;
        }
        @keyframes b{
            100%{
                transform: rotate(360deg);
            }
        }
        #circle{
            width: 20px;
            height: 20px;
            border: 5px solid #ccc;
            border-radius: 50%;
            position: relative;
            transform: rotate(0deg);
            animation:b 1s ease infinite alternate;
        }
        #circle::after{
            content: '';
            width: 30px;
            height: 30px;
            border-left: 5px solid #f00;
            position: absolute;
            top: -5px;
            left: -5px;
            box-sizing: border-box;
            border-radius: 50%; 
        }
    </style>
</head>
<body>
    <div id='box'>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div id='circle'></div>
</body>
</html>